<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 文本</title>
    <style type="text/css">
        /*  缩进文本 */
        /* css 提供了 text-indent 属性来事项文本缩进  通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：可以用于所有的 块级元素 */
       /*p{text-indent: 5em}*/
        /*p{*/
            /*text-indent:-10px;*/
            /*padding-left: 10px;*/
            /*background-color: #cc2200;*/
        /*}*/

        /* 可以试用 百分比缩进 一般缩进其 父元素宽度的 百分比*/
        /*div{*/
            /*width: 500px;*/
        /*}*/
        /*p{*/
            /*text-indent: 20%;*/
        /*}*/

        /*  text-indent 属性可以继承  继承的值 是具体的 xxpx  而不是百分比 也就是缩进值 */
        div#outer{
            background-color: #cc2200;
            width: 800px;
        }

        div#inner{
            background-color: #8235bd;
            /*text-indent: 20%;*/
            text-indent: 160px;
            padding: 0px;
        }

        p{
            width: 200px;
            background-color: #aaeecc;
            /*margin: 0px;*/
        }

        /*  水平对齐   text-align  */
        /*默认的值是 left也就是 从左到右对齐 right 和 center 是 右对齐和居中
          将块级元素 或者 表元素居中 要适当的设置左右外边距来实现
        */
         /*  块级元素 的居中需要适当的设置左,右外边距 来实现
            <CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
         */
        /*
           字间距
           word-sapcing 属性可以改变单词之间的标准间距 对中文并没有卵用 !!!!
        */
        p.spread{word-spacing: 30px}
        p.tight{word-spacing: -1em}

        /*
        字母间隔
        letter-spacing 属性 设置的是 字符和字母之间的间隔  对中文依然没什么卵用 !!!
        */
        p.letterTight{letter-spacing: -0.5em}
        p.letterSpread{letter-spacing: 20px}
        /*
         字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值：
none
uppercase
lowercase
capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase
 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。如果已经是大写的就不用了
作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，
这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：
         */

        h1{text-transform: uppercase}
        p.uppercase{text-transform: uppercase}
        p.lowercase{text-transform: lowercase}
        p.capitalize{text-transform: capitalize}


        /*  测试 文本装饰 */
        p.none{text-decoration: none}
        p.underline{text-decoration: underline}
        p.overline{text-decoration: overline}
        p.line-through{text-decoration: line-through}
        p.blink{text-decoration: blink}  /* 这种效果可以看下 */

        /* 还可以 去掉 超链接元素的下划线 */
        a.none{text-decoration: none}

        /* 如果多个样式 作用于一个 元素看是否生效 实际上我们不这样用
         所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，
         因为 text-decoration 值会替换而不是累积起来。 替换而不是累积
         */
        h2.stricken {text-decoration: line-through;}
        h2 {text-decoration: underline overline;}

        /*  测试 white-sapce */
        p.whiteSpace{
            white-space: normal;
        }
        p.nowrap{
            white-space:nowrap;
        }
        p.pre{
            white-space:pre;
        }

    </style>
</head>
<body>
    <p>测试一下</p>
    <div>
        <p> this is a paragraph</p>
    </div>

    <!-- 以下标记中的段落也会缩进 800px * 20% = 160px 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。-->
    <div id="outer">
        <div id="inner">some text.some text.some text
            <p>this is a test paragraph</p>
            <p>这是第二行</p>
            <p>这是第三行,放在缩进测试</p>
        </div>
    </div>

    <!--测试  word-spacing  -->
    <p class="spread">测试 word-spacing</p>
    <p class="tight">测试 word-spacing two貌似对中文并没有什么卵用</p>
    <p class="letterTight">测试 letter spacing 在看下中文</p>
    <p class="letterSpread">测试 letter Spread  再看下中文</p>
    <!-- 测试 text-transform  -->
    <h1>This is An H1  Element </h1>
    <h1>This is An H1  Element  3333</h1>
    <p class="uppercase">This is some text in a para</p>
    <p class="lowercase">This is some text in a para</p>
    <p class="capitalize">h This is some text in a para</p>
    <!--  测试 text-decoration   -->
    <p class="none">none</p>
    <p class="underline">underline</p>
    <p class="overline">overline</p>
    <p class="line-through">line-through</p>
    <p class="blink">blink</p>

    <!--   测试 去掉a 元素的下划线  -->
    <a href="www.baidu.com" class="none">百度一下</a>

    <!-- 如果多个样式 作用于一个 元素看是否生效 -->
    <h2 class="stricken"></h2>
    <h2> 这是 H2 的头</h2>
    <!--  测试 white-space  -->
    <p>This               paragraph has    many
        spaces           in it.</p>
    <p class="whiteSpace">注释：当 white-space               属性设置为 normal 时，会合并所有的空白符，并忽略换行符。</p>
    <p class="nowrap">nowrap   djdasjfiodsjfgvaiodjfadpjifojadsfjiodhjfiosdhjiiofjadisjfioqrjiofjaiofgjviofjaiofjiofhjaiofhjioadf</p>
    <p class="pre">pre   gnvajkerfgnvargvadfnijkvnadfgjvafkjkljafkfjdfjdgioiofjqiowjfjqwofjfgjawopjfojaqefjjfilawjmfijafkfjopfajopjjfaioj</p>
</body>
</html>
























